import React, { useEffect, useState } from 'react';

import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme, Dropdown, Button, Drawer, Switch, ConfigProvider } from 'antd';
import { NavLink, useLocation } from 'react-router-dom';
import router, { routerlist } from '../router/index';
import Tabss from '../components/Tabs';
import { HomeOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';

import { Select } from "antd"
import { Outlet } from "react-router-dom"

const { Option } = Select
function Home() {
    const { Header, Content, Footer, Sider } = Layout;

    const { t, i18n } = useTranslation();

    const location = useLocation()

    type MenuItem = Required<MenuProps>['items'][number];

    const [open, setOpen] = useState(false);

    const showDrawer = () => {
        setOpen(true);
    };

    const onClose = () => {
        setOpen(false);
    };

    //当路由发生跳转的时候，动态设置网站的标题
    useEffect(() => {
        document.title = location.pathname
    }, [location.pathname])

    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
        title: string
    ): MenuItem {
        return {
            key,
            icon,
            children,
            label,
        } as MenuItem;
    }

    // const { t, i18n } = useTranslation()

    const router = (arr) => {
        let list = [];
        arr.forEach((item) => {
            if (item.children) {
                list.push(
                    getItem(
                        <NavLink to={item.path}>{t(item.title)}</NavLink>,
                        item.path,
                        item.icon,
                        router(item.children)
                    )
                );
            } else {
                list.push(
                    getItem(
                        <NavLink to={item.path}>{t(item.title)}</NavLink>,
                        item.path,
                        item.icon
                    )
                );
            }
        });
        return list;
    };



    const items = router(routerlist);

    // 生成面包屑项的函数
    const mianb = () => {
        const list = [
            {
                title: t('home')
            },
        ];

        const router = routerlist.find(route => route.path === location.pathname);
        if (router?.title) {
            list.push({
                title: t(router.title),
            });
        }
        return list;
    };

    // const items: MenuItem[] = [
    //     getItem('Option 1', '1', <PieChartOutlined />),
    //     getItem('Option 2', '2', <DesktopOutlined />),
    //     getItem('User', 'sub1', <UserOutlined />, [
    //         getItem('Tom', '3'),
    //         getItem('Bill', '4'),
    //         getItem('Alex', '5'),
    //     ]),
    //     getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
    //     getItem('Files', '9', <FileOutlined />),
    // ];

    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();


    const [logo, setLogo] = useState([])

    const onChange = (checked: boolean) => {
        console.log(`switch to ${checked}`);
        setLogo(!logo)
    };


    const cz = () => {

        // 让开关样式变成关闭
        setLogo(false)

    }

    const [get, setGet] = useState(false)

    const onChange1 = () => {
        setGet(!get)
    }




    return (
        <div>

            <ConfigProvider
                theme={{
                    // 1. 单独使用暗色算法
                    algorithm: get ? theme.darkAlgorithm : theme.defaultAlgorithm,

                    // 2. 组合使用暗色算法与紧凑算法
                    // algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
                }}
            >
                <Layout style={{ minHeight: '100vh' }}>
                    <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>

                        {/* <Dropdown menu={{ items }} placement="bottomLeft">
                        <Button>bottomLeft</Button>
                    </Dropdown> */}

                        <div>
                            {/* 显示与隐藏 */}
                            <h1 style={{ color: '#ccc' }}>
                                {logo ? <span>后台管理系统</span> : ''}
                            </h1>
                        </div>

                        <div onClick={showDrawer} style={{ textAlign: 'center', margin: 'auto 0' }}>
                            <img style={{ width: '68px', height: '68px' }} src="https://picsum.photos/200/300?random=1" alt="" />
                            <span style={{ color: '#ccc' }}>张三</span>
                        </div>

                        <div className="demo-logo-vertical" />
                        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />

                    </Sider>
                    <Layout>
                        <Header style={{ padding: 0, background: colorBgContainer }} >
                            <Tabss></Tabss>

                        </Header>
                        <Content style={{ margin: '0 16px' }}>
                            {/* <Breadcrumb style={{ margin: '16px 0' }} items={[{ title: 'User' }, { title: 'Bill' }]} /> */}
                            <Breadcrumb
                                items={mianb()}
                            />
                            <div
                                style={{
                                    padding: 24,
                                    minHeight: 360,
                                    background: colorBgContainer,
                                    borderRadius: borderRadiusLG,
                                }}
                            >

                                <Select
                                    value={i18n.language}
                                    style={{ width: 120 }}
                                    onChange={(value) => i18n.changeLanguage(value)}
                                >
                                    <Option value="zh">中文</Option>
                                    <Option value="en">英文</Option>
                                </Select>
                                <Outlet></Outlet>
                            </div>
                        </Content>
                        <Footer style={{ textAlign: 'center' }}>
                            Ant Design ©{new Date().getFullYear()} Created by Ant UED
                        </Footer>
                    </Layout>
                </Layout>
            </ConfigProvider>

            <Drawer

                closable={{ 'aria-label': 'Close Button' }}
                onClose={onClose}
                open={open}
            >
                <div>

                    <span>切换背景色</span> <Switch checked={get} onChange={onChange1} />

                    <span>开启 TopNav</span> <Switch></Switch>
                    <p></p>
                    <span>显示 Logo</span> <Switch checked={logo} onChange={onChange} />

                    <Button onClick={cz}>重置配置</Button>
                </div>
            </Drawer>
        </div>
    )
}

export default Home